<template>
	<view class="main">
		<view class="content">
			<view class="boxs">
				<view class="">
					<view class="top" :style="{ paddingTop: systemInfo.titleTop + 'px' }">
						<view class="main-title" :style="{ height: systemInfo.sBarHeight + 'px', 'line-height': systemInfo.sBarHeight + 'px' }">
							<view class="x-t" @click="$goURl('back')">
								<image src="/static/l1.png" mode="aspectFill"></image>
								<view class="txt">申请离职</view>
							</view>
						</view>
					</view>
				</view>
				<view class="com">
					<view class="cover">
						<image src="/static/rlogo.jpg" mode=""></image>
					</view>
					<view class="com-name">威远人力资源（上海）有限公司</view>
				</view>
			</view>
			<view class="form" :style="{ height: formH + 'px' }">
				<view class="title">申请离职</view>
				<view class="ip">
					<textarea v-model="formData.reason" class="a" cols="30" rows="10" placeholder="请输入离职原因"></textarea>
				</view>
				<view class="btn-box">
					<view class="btn" @click="submit">提交申请</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, nextTick, reactive, onMounted } from 'vue';
import { onPageScroll } from '@dcloudio/uni-app';
import { postDimission } from '@/api/apiList.js';

const formData = reactive({
	reason: ''
});
// 提交
const submit = async () => {
	if (!formData.reason) {
		uni.showToast({
			title: '请填写离职原因',
			icon: 'none'
		});
		return;
	}
	const res = await postDimission(formData);
	if (res.code == 200) {
		uni.showToast({
			title: '提交成功',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateBack();
		}, 1500);
	}
};

const capsule = uni.getStorageSync('capsule');
let systemInfo = uni.getStorageSync('systemInfo');

let formH = ref(0);
onMounted(() => {
	let view = uni.createSelectorQuery().select('.boxs');
	view.boundingClientRect((data) => {
		const { height } = data;
		uni.getSystemInfo({
			success: function (res) {
				let newsPanelHeight = res.windowHeight - height;
				formH.value = newsPanelHeight;
			}
		});
	}).exec();
});
</script>

<style>
/* page {
	height: 100%;
	background: linear-gradient(180deg, #2b77ff 0%, #f9f9f9 45%);
} */
</style>

<style lang="scss" scoped>
.main {
	height: 100%;
	overflow: hidden;
	background: linear-gradient(180deg, #2b77ff 0%, #f9f9f9 50%);
}
.content {
	padding: 0 32rpx;
}
.main-title {
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 500;
	font-size: 36rpx;
	color: rgba(255, 255, 255, 0.851);
	.x-t {
		display: flex;
		align-items: center;
		image {
			width: 40rpx;
			height: 40rpx;
		}
		.txt {
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 36rpx;
			color: #fff;
		}
	}
}

.com {
	display: flex;
	align-items: center;
	margin: 40rpx 0 28rpx 0;
	.cover {
		margin-right: 16rpx;
		image {
			width: 56rpx;
			height: 56rpx;
		}
	}
	.com-name {
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 32rpx;
		color: #ffffff;
	}
}

.form {
	background: #ffffff;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding: 24rpx;
	height: 100%;
	.title {
		margin-bottom: 24rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 28rpx;
		color: #3d3d3d;
	}
	.ip {
		.a {
			width: 100%;
			height: 240rpx;
			background: #f4f7ff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx;
		}
	}
	.btn-box {
		margin-top: 360rpx;
		display: flex;
		justify-content: center;
		.btn {
			width: 560rpx;
			height: 100rpx;
			background: #2b77ff;
			border-radius: 50rpx;
			font-family: Source Han Sans, Source Han Sans;
			font-weight: 500;
			font-size: 28rpx;
			color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
